<template>
	<view class="">
		<view class="bg-color">
			<view class="out">
				<view class="item-out">
					<view>收货人</view>
					<view class=""><input type="nickname" focus placeholder="收货人姓名" v-model="addressObj.name"
							placeholder-style="color:#F76260" /></view>
					<view></view>
				</view>
				<view class="item-out">
					<view>手机号</view>
					<view class=""><input focus placeholder="收货人手机号" type="number" v-model="addressObj.tel" />
					</view>
					<view></view>
				</view>
				<view class="item-out">
					<view>所在地区</view>
					<view class="">{{pathCity}}</view>
					<mpvue-city-picker ref="mpvueCityPicker" :pickerValueDefault="pickerValueDefault"
						@onConfirm="onConfirm" />
					<view class="iconfont icon-youjiantou" @click="showCityPicker"></view>
				</view>
				<view class="item-out">
					<view>详细地址</view>
					<view class=""><input focus placeholder="请填写详细地址" v-model="addressObj.details" /></view>
				</view>
			</view>
			<view class="switch-out">
				<view class="">
					设为默认收货地址
				</view>
				<switch style="transform:scale(0.8)" color="red" :checked="addressObj.isDefalt==1?true:false"
					@change="switch1Change" />
			</view>
			<view class="tags-out">
				<view class="">
					地址标签
				</view>
				<view class="tags">
					<text v-for="(item,index) in tagsArr" :key="item.id" :class="current===item.id?'active':''"
						@click="clickTag(item.id)">
						{{ item.name }}
					</text>
				</view>
				<view class=""> </view>
			</view>
			<view class="btn" @click="save">保存并使用</view>
		</view>
	</view>
</template>

<script>
	import mpvueCityPicker from '@/components/mpvue-citypicker/mpvueCityPicker.vue';
	import {
		mapState,
		mapActions
	} from 'vuex';
	import http from '@/common/api/reqeust.js';

	export default {
		data() {
			return {
				tagsArr: [{
					name: '家',
					id: 1
				}, {
					name: '公司',
					id: 2
				}, {
					name: '学校',
					id: 3
				}],
				current: 0,
				pickerValueDefault: [0, 0, 1],
				addressObj: {
					province: '',
					city: '',
					district: '',
					details: '',
					name: '',
					tel: '',
					isDefalt: 0
				},
				i: -1,
				// 修改/增加地址
				isUpdate: false
			}
		},
		components: {
			mpvueCityPicker
		},
		computed: {
			...mapState({
				list: state => state.address.list,
				userInfo: state => state.user.userInfo
			}),
			// 选择城市面板
			pathCity() {
				if (this.addressObj.province) {
					return `${this.addressObj.province}-${this.addressObj.city}-${this.addressObj.district}`
				} else {
					return '请选择'
				}
			}
		},
		onLoad(e) {
			if (e.data) {
				uni.setNavigationBarTitle({
					title: '修改地址'
				});
				let path = JSON.parse(e.data)
				this.addressObj = path.item
				this.isUpdate = true
				this.i = path.index
			}
		},
		methods: {
			save() {
				if (this.isUpdate) {
					// 修改地址
					http.request({
						url: '/api/updateAddress',
						method: 'post',
						data: {
							phone: this.userInfo.phone,
							...this.addressObj
						}
					}).then(res => {
						if (res.success) {
							uni.showToast({
								title: res.msg
							})
							// 修改
							this.updatePathFn({
								index: this.i,
								item: this.addressObj
							})
							uni.navigateTo({
								url: '/pages/deliveryAddress/deliveryAddress'
							})
						}
					}).catch(() => {
						uni.showToast({
							title: '请求失败',
							icon: 'error'
						})
					})
				} else {
					http.request({
						url: '/api/addAddress',
						method: 'post',
						data: {
							phone: this.userInfo.phone,
							...this.addressObj
						}
					}).then(res => {
						if (res.success) {
							uni.showToast({
								title: res.msg
							})
							// 新增
							this.addAddressFn(
								this.addressObj,
							);
							uni.navigateTo({
								url: '/pages/deliveryAddress/deliveryAddress'
							})
						}
					}).catch(() => {
						uni.showToast({
							title: '请求失败',
							icon: 'error'
						})
					})
				}

			},
			clickTag(id) {
				this.current = id
			},
			// 城市选择器打开
			showCityPicker() {
				this.$refs.mpvueCityPicker.show();
			},
			// 选择城市 确定后
			onConfirm(e) {
				let arr = e.label.split('-')
				this.addressObj.province = arr[0]
				this.addressObj.city = arr[1]
				this.addressObj.district = arr[2]
			},
			...mapActions(['addAddressFn', 'updatePathFn']),

			// 设为默认收货地址
			switch1Change: function(e) {
				this.addressObj.isDefalt = e.detail.value ? 1 : 0
				console.log('switch1 发生 change 事件，携带值为', e.detail.value)
			}
		}
	}
</script>

<style lang="scss" scoped>
	@mixin flex {
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.active {
		background-color: #fde6e9 !important;
		color: red !important;
	}

	.bg-color {

		.switch-out,
		.intelligence-out,
		.tags-out {
			@include flex;
			background-color: #fff;
			padding: 10rpx $pd20;
			margin: $pd20 $pd20 0;
			border-radius: 10rpx;
		}

		.btn {
			margin: $pd30 $pd20 0;
		}

		.tags-out {
			.tags {
				display: flex;
				align-items: center;

				text {
					background-color: #f7f8fa;
					color: #969799;
					border-radius: $pd20;
					padding: 10rpx $pd30;
					text-align: center;
					margin-right: 10rpx;
				}
			}
		}

		.out {
			background-color: #fff;
			margin: $pd20;
			border-radius: 10rpx;

			.item-out {
				@include flex;
				padding: 10rpx $pd20;

				&:not(:last-child) {
					border-bottom: solid 1px $border-line;
				}

				view:nth-of-type(1),
				view:nth-of-type(3) {
					color: $txt-color;
				}
			}
		}

		.btn {
			color: #fff;
			background-color: red;
			border-radius: 50rpx;
			font-size: 14px;
			height: 100rpx;
			line-height: 100rpx;
			text-align: center;
		}
	}
</style>
